#coordo div *, #motif div * {
    font-family: initial;
}

#contact h1 {
    margin-top: 10px;
    text-align: left;
}

#contact form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 50px;
    margin-top: 10px;
}

#contact form fieldset {
    padding: 10px;
}

#coordo legend {
    padding: 0 5px;
    font-weight: bold;
}

#coordo label {
    margin-right: 10px;
}

#coordo input, #coordo select {
    flex: 1;
}

#coordo div {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}

#coordo input[type="checkbox"] {
    margin-right: 5px;
}

#coordo #marques label {
    text-transform: capitalize;
}

#coordo fieldset {
    width: fit-content;
    margin: auto;
}

#motif {
    align-self: flex-start;
}

#motif legend {
    padding: 0 5px;
    font-weight: bold;
}

#motif div {
    margin: 10px;
}

#motif label {
    margin-left: 10px;
}

#controles {
    margin-top: 10px;
}

#controles input {
    padding: 10px;
}

#controles input:first-child {
    margin-right: 10px;
}

input:valid, :not(input[type="submit"]) {
    color: green;
}
input:invalid {
    color: red;
}

#coordo div.input-validation {
    margin: 0;
}

input[type="text"]:valid ~ .input-validation::before,
input[type="email"]:valid ~ .input-validation::before {
    content: "✔";
    margin-left: 5px;
    color: green;
}



@media screen and (max-width:576px) {
    #motif {
        margin-top: 20px;
    }
    #contact h1 {
        text-align: center;
    }
    #coordo {
        display: none;
    }
    #controles {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #btn_envoyer {
        width: 100%;
    }
}

@media screen and (min-width:576px) and (max-width:768px) {
    #contact {
        margin: 0px 6px;
        display: flex;
        flex-direction: column;
    }
    #contact h1 {
        width: 100%;
    }
    #coordo {
        width: 100%;
    }
    #motif {
        width: fit-content;
    }
    #controles {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}